<template>
	<view class="content">

		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->
		<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/注册页面.jpeg" class="img"></image>
		<view class="login_from">

			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/user.png"></image>
				<view class="login_from_name">用户名</view>
				<view class="login_from_fun"><input class="uni-input" type="text" placeholder="请输入用户名"  maxlength="10" v-model="username"/></view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/password.png"></image>
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input class="uni-input" password type="text" placeholder="请输入密码"  maxlength="10" v-model="password"/></view>
			</view>



		</view>

		<view class="login_from_dl">
			<button @click="modify">提交修改</button>
		</view>

	</view>
</template>

<script>
	import {
		vShow
	} from "vue";
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		onLoad() {

		},
		methods: {
			async modify() {
				var that = this;
				if (that.username.length == 0 || that.password.length == 0) { //校验非空
					wx.showToast({ //弹框提示
						icon: 'none',
						title: '登录账号或密码不能为空！',
						duration: 2000,
					})
				} else {
					let params = {
						username: that.username,
						password: that.password,
					};
					const res = await uni.$http.post('/modify', params);
					if (res.data.code == 200) {
						wx.showToast({ //弹框提示
							icon: 'none',
							title: '密码修改成功！',
							duration: 2000,
						});
						uni.navigateTo({
							//保留当前页面，跳转到应用内的某个页面
							url: '/pages/login/login'
						})
					} else {
						wx.showToast({
							icon: 'none',
							title: "密码修改失败"
						})
					}
				}

			},
		}
	}
</script>

<style lang="scss">
	.img {
		width: 100%;
		height: 350rpx;
	}

	page {
		background: #fff;
	}

	.login_from_input image {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 50rpx 8%;
		align-items: center;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 70%;
		text-align: left;
		font-size: 27rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-top: 80rpx;
	}

	.login_from_dl button {
		width: 80%;
		height: 50px;
		line-height: 50px;
		background: #FF3B00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.eye {
		margin-top: 5rpx;
		width: 55rpx;
		height: 55rpx;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
